<template>
	<view>
		<!-- 状态栏 -->
		<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
		<view class="myheader padding-sm  flex justify-between">
			<view class="font-sub-title">
				<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
				肤色
			</view>
			<view @click="save" class="font-sub-title">
				保存
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item" @click="select(index)" v-for="(item,index) in skinList">
				<view class="content">
					<skin :color="item"></skin>
				</view>
				<view class="action" v-if="index == skinIndex">
					<text class="font-sub-title text-bold text-blue cuIcon-check"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const bandSDK = uni.requireNativePlugin('BandSDK')
	export default {
		data() {
			return {
				statusBarHeight: Vue.prototype.StatusBar,
				skinList:['#FFFFFF','#FFE8C8','#F4D795','#C88E4E','#624422','#402909'],
				skinIndex:''
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			select(index){
				this.skinIndex = index;
			},
			onShow(){
				var skinIndex= uni.getStorageSync("skinIndex")||2
				this.skinIndex =skinIndex
			},
			save(){
				var that = this
				bandSDK.settingSkin({
					skinColor:that.skinIndex
				},res=>{
					if(res=="success"){
						uni.showToast({
							"title":"保存成功"
						})
						uni.setStorageSync("skinIndex",that.skinIndex)
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					}
				})
			}
		}
	}
</script>

<style>

</style>
